<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="author" content="金西振">
    <title></title>
    <style>
        body {
            margin: 0;
        }

        ul,
        li {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        .container {
            width: 1170px;
            margin: 0 auto;
        }

        .header {
            background-color: lightblue;
            height: 130px;
        }

        nav {
            width: 100%;
            height: 43px;
            background-color: #fff;
            transition: all 0.3s linear;
            top: -200px;
        }

        .nav-menu {
            height: 43px;
            display: flex;
            line-height: 43px;
        }

        .nav-menu li {
            padding: 0 15px;
            color: #333;
        }

        .nav-menu .icon {
            display: inline-block;
            width: 20px;
            height: 43px;
            background: url('./img/menu.png') center center no-repeat;
        }

        .nav-menu .icon::before {
            content: '\3000';
        }

        .nav-menu li.menu-level1 {
            background-color: #f10180;
            cursor: pointer;
            color: #fff;
            width: 156px;
            text-align: center;
        }

        .nav-menu li.first {
            color: #f10180;
            font-weight: 700;
        }

        .nav-menu li:not(:nth-child(1)):not(:nth-child(2)):hover {
            cursor: pointer;
            color: #f10180;
        }

        /* 横幅 */
        .banner {
            height: 1000px;
            background-color: lightsteelblue;
        }

        .item:nth-child(2n) {
            height: 1000px;
            background-color: lightgray;
        }

        .item:nth-child(2n+1) {
            height: 1000px;
            background-color: lightcoral;
        }

        .nav-left {
            margin: 0;
            padding: 0;
            list-style: none;
            width: 60px;
            padding: 5px;
            border: 1px solid #ccc;
            text-align: center;
            border-radius: 5px;
            ;
            position: absolute;
            top: 1300px;
            right: calc(50% + 585px + 30px);
        }

        .nav-left li {
            padding: 10px 0;
            border-bottom: 1px solid #ccc;
            cursor: pointer;
        }

        .nav-left li:last-child {
            border: none;
        }

        .nav-left li.active {
            background-color: #df147f;
            border-radius: 5px;
            border: none;
        }
    </style>
</head>

<body>
    <header>
        <div class="container header">
            头部
        </div>
    </header>
    <!-- 导航菜单 -->
    <nav>
        <div class="container nav">
            <ul class="nav-menu">
                <li class="menu-level1">全部分类</li>
                <li class="first">首页</li>
                <li class="">唯品快抢</li>
                <li>女装</li>
                <li>家电</li>
                <li>鞋包</li>
            </ul>
        </div>
    </nav>
    <div class="banner">

    </div>
    <div class="container item">
        <h2>精选品牌</h2>
    </div>
    <div class="container item">
        <h2>女装品牌</h2>
    </div>
    <div class="container item">
        <h2>鞋包品牌</h2>
    </div>
    <div class="container item">
        <h2>男装品牌</h2>
    </div>
    <div class="container item">
        <h2>运动品牌</h2>
    </div>
    <ul class="nav-left">
        <li class="active">精选</li>
        <li>女装</li>
        <li>鞋包</li>
        <li>男装</li>
        <li>运动</li>
    </ul>
    <script>
        var topNav = document.querySelector('nav');
        var navTop = topNav.offsetTop;

        var items = document.getElementsByClassName('item'); //所有分类标签
        var navLeft = document.querySelector('.nav-left');
        var leftLis = document.querySelectorAll('.nav-left li');
        var itemTops = []; //记录每一个分类标签与网页顶部的距离
        var num = 0;

        for (var i = 0; i < items.length; i++) {
            itemTops.push(items[i].offsetTop);

        }
        window.onscroll = function () {
            //顶部导航条
            if (document.scrollingElement.scrollTop >= navTop + 100) {
                topNav.style.position = 'fixed'
                topNav.style.top = '0'
            } else {
                topNav.style.position = 'static'
                topNav.style.top = '-200px'
            }
            // 左侧导航
            if (document.scrollingElement.scrollTop >= itemTops[0] - 100) {
                navLeft.style.position = "fixed"
                navLeft.style.top = '100px'
            } else {
                navLeft.style.position = 'absolute'
                navLeft.style.top = '1300px'
            }

            leftLis[num].className = ''
            // 网页滚动设置
            for (var i = 0; i < itemTops.length; i++) {
                if (document.scrollingElement.scrollTop >= itemTops[i] - 200) {
                    num = i;
                }
            }

            leftLis[num].className = 'active'
        }

        // 左右联动(点击左侧标题，网页滚动到对应位置)
        for (var i = 0; i < leftLis.length; i++) {
            leftLis[i].index = i;
            leftLis[i].onclick = function () {

                // 展示设置样式
                this.className = 'active';
                leftLis[num].className = '';
                num = this.index;

                // 网页滚动到对应位置
                document.scrollingElement.scrollTop = itemTops[this.index] - 100;
            }
        }
    </script>
</body>

</html>